<template>
  <div class="table-contain">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"> </el-table-column>
      <el-table-column prop="name" label="Name" width="180"> </el-table-column>
      <el-table-column
        prop="address"
        label="This is a long long long long long long long long long long Address"
        :render-header="renderHeader"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "elementTable",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  created() {
    let _this = this;
  },
  mounted() {
    let _this = this;
  },
  components: {},
  methods: {
    renderHeader: function (h, { column }) {
      return h(
        "div",
        {
          slot: "content",
          class: "table-header-flex",
        },
        [
          h(
            "el-tooltip",
            {
              props: {
                placement: "top",
              },
            },
            [
              h(
                "div",
                {
                  slot: "content",
                  style: {
                    whiteSpace: "normal",
                  },
                },
                column.label
              ),
              h(
                "span",
                {
                  style: {
                    whiteSpace: "normal",
                    overflow: "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "max-width": "90%",
                    display: "inline-block",
                  },
                },
                column.label
              ),
            ]
          ),
        ]
      );
    },
  },
};
</script>

<style>
.table-contain {
  width: 500px;
  height: 100%;
  padding: 10px;
}
</style>